<template>
    <div class="detailFooter">
        <h4>0条真实用户数据</h4>
        <div class="modulars">
            <div class="remarks">
                <p>总评数：{{ hotelData.all_remarks }}</p>
                <p>好评数：{{ hotelData.good_remarks }}</p>
                <p>差评数：{{ hotelData.bad_remarks }}</p>
            </div>
            <div class="stars">
                <el-rate
                v-model="hotelData.stars"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
                </el-rate>
            </div>
            <div class="environment">
                <div style="width: 150px;height: 150px">
                    <canvas id="environmentCanvas"></canvas>
                    <p class="content">
                        环境<br/>
                        {{ hotelData.scores.environment }}
                    </p>
                </div>
            </div>
            <div class="product">
                <div style="width: 150px;height: 150px">
                    <canvas id="productCanvas"></canvas>
                    <p class="content">
                        产品<br/>
                        {{ hotelData.scores.product }}
                    </p>
                </div>
            </div>
            <div class="service">
                <div style="width: 150px;height: 150px">
                    <canvas id="serviceCanvas"></canvas>
                    <p class="content">
                        服务<br/>
                        {{ hotelData.scores.service }}
                    </p>
                </div> 
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        hotelData: {
            type: Object,
            default: {}
        }
    },
    methods:{
        setRadian(canvasArr,score){
            canvasArr.forEach((ele,index) => {
                let ctx = ele.getContext('2d');
                ctx.strokeStyle = "#ffa500";
                ctx.beginPath();
                ctx.arc(
                    80,
                    80,
                    40,
                    ( 0 / 360 ) * (Math.PI * 2) - 90,
                    ( score[index] * 3.6 / 360 ) * (Math.PI * 2) - 90
                );
                ctx.stroke();
            })
        }
    },
    mounted(){
        setTimeout(() => {
            let canvas1 = document.querySelector('#environmentCanvas');
            let canvasArr = [
                document.querySelector('#environmentCanvas'),
                document.querySelector('#productCanvas'),
                document.querySelector('#serviceCanvas')                
            ]
            let radianArr = [
                this.hotelData.scores.environment * 10,
                this.hotelData.scores.product * 10,
                this.hotelData.scores.service * 10
            ]
            this.setRadian(canvasArr,radianArr);
        },1000)
    }
}
</script>

<style scoped lang="less">
    .detailFooter{
        margin-top: 20px;
        .modulars{
            display: flex;
            justify-content: space-evenly;
            div{
                flex: 0 0 20%;
            }
            .remarks,
            .stars,
            .environment,
            .product,
            .service{
                display: flex;
                flex-direction: column;
                justify-content: center;
                position: relative;
                .content{
                    position: absolute;
                    top: 41%;
                    left: 33%;
                    text-align: center;
                    color: orange;
                }
            }
        }
    }
</style>